<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="myBtn" value="Click Me">
<input type="button" id="myBtn2" value="Click Me2">
<script>

    /*
        dom0
     */
    let btn = document.getElementById('myBtn')
    btn.onclick = function () {
        // this引用元素本身
        console.log('this', [this])
        console.log('Clicked')
    }

    // 如果要移除点击事件
    // btn.onclick = null;


    /*
        dom2事件
            - addEventListener()
                - 参数
                    - 事件名 (string)
                    - 事件处理函数 (function)
                    - 是否捕获  (boolean) true-捕获 false-冒泡(默认)
                - 还可以添加多个addEventListener
     */

    let btn2 = document.getElementById('myBtn2')
    btn2.addEventListener('click', function () {
        console.log('addEventListener', this.id)
    })
    
    // 添加多个
    btn2.addEventListener('click',function () {
        console.log('第二次输出')
    })
    
    /*
        btn.removeEventListener()
            - 移除某个事件
                - 主要需要传入与之前相同的参数才行
          
             let btn = document.getElementById("myBtn");
            let handler = function() { 
                console.log(this.id);
             };
            btn.addEventListener("click", handler, false);
            // 其他代码
            btn.removeEventListener("click", handler, false); // 有效果!      
        
     */

</script>
</body>
</html>